<!--导航栏-->
<template>
    <div>
        <el-menu default-active="activeIndex" class="el-menu-demo" mode="horizontal"  id = "left">
            <el-menu-item index="1" @click="welcome">欢迎界面</el-menu-item>

            <el-submenu index="2">
                <template slot="title">设备管理</template>
                <el-menu-item index="2-1" @click = "add">添加设备</el-menu-item>
                <el-menu-item index="2-2"  @click = "del">删除设备</el-menu-item>
                <el-menu-item index="2-3"  @click = "update">查看设备</el-menu-item>
            </el-submenu>

            <el-submenu index="3">
                <template slot="title">用户管理</template>
                <el-menu-item index="3-1" @click="adduser">添加用户</el-menu-item>
                <el-menu-item index="3-2" @click="deluser">移除用户</el-menu-item>
                <el-menu-item index="3-3" @click="user">查看用户</el-menu-item>
            </el-submenu>

            <el-menu-item index="4" @click="getMap">设备详情</el-menu-item>
    
        </el-menu>
        <div id = "right">
            <el-dropdown placement="bottom">
             <i class="el-icon-user"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="loginout()">切换账号</el-dropdown-item>
                    <el-dropdown-item @click.native="loginout()"> 退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
    
</template>

<script>
//import axios from "axios";

export default {
    name: 'MyNav',
    methods:{
        add()
        {
            if (this.$route.path !== '/adddevice') 
                this.$router.push('/adddevice')
        },
        del()
        {
            if (this.$route.path !== '/deldevice') 
                this.$router.push('/deldevice')
        },
        update()
        {
            if (this.$route.path !== '/device') 
                this.$router.push('/device')
        },
        adduser()
        {
            if (this.$route.path !== '/adduser') 
                this.$router.push('/adduser')
        },
        deluser()
        {
            if (this.$route.path !== '/deleteuser') 
                this.$router.push('/deleteuser')
        },
        user()
        {
            if (this.$route.path !== '/user') 
                this.$router.push('/user')
        },
        welcome()
        {
            if (this.$route.path !== '/page') 
                this.$router.push('/page')
        },
        getMore()
        {
            if (this.$route.path !== '/getmore') 
            this.$router.push('/getmore')
        },
        loginout(){
            // const userId = localStorage.getItem('userId'); // 假设你存储了用户ID
            // axios.post('/{id}', { userId: userId })
            //     .then(response => {
            //         if (response.data.success) {
            //             localStorage.removeItem('honey-user'); // 清除当前token
            //             this.$message.success('退出登录成功');
            //             this.$router.push('/');
            //         }
            //     })
            localStorage.removeItem('honey-user'); // 清除当前token
            this.$message.success('退出登录成功');
            if (this.$route.path !== '/')
                this.$router.push('/')
            // const userId = localStorage.getItem('userId'); // 假设你存储了用户ID
            // axios.post('/{id}', { userId: userId })
            //     .then(response => {
            //         if (response.data.success) {
            //             localStorage.removeItem('honey-user'); // 清除当前token
            //             this.$message.success('退出登录成功');
            //             this.$router.push('/');
            //         }
            //     })
            localStorage.removeItem('honey-user'); // 清除当前token
            this.$message.success('退出登录成功');
            if (this.$route.path !== '/')
            this.$router.push('/')
        },
        getMap()
        {
            if (this.$route.path !== '/map') 
            this.$router.push('/map')
        }
    }
}
</script>

<style>
    #left{
        width: 100%;
    }
    #right{
        position:fixed;
        right: 20px;
        top:20px;
        margin: 0px;
        padding: 0px;
    }
    .el-icon-user{
        width: 60px;
        height: 40px;
    }
</style>